<template>
  <view>
    <view 
      class="w-750rpx m-a pl-32rpx pr-32rpx box-border font-size-28rpx font-600 mt-50rpx mb-20rpx relative"
    >
      {{ user.userInfo.verificationFlag ? '您已完成实名认证' : '实名认证' }}
      <slot name="score"></slot>
    </view>
    <view class="w-center font-size-24rpx color-#666" v-if="isShowText">
      <!-- <view class="">真实有效的身份信息，更容易获得对方的信任。</view>
      <view class="">实名认证后，会出现"已实名认证"标记。</view> -->
      <view class="">你的身份信息仅用于认证，丹身乐缘将严格保密。</view>
      <view class="">为了打造真实的征婚平台，请遵守相关法律法规，如实填写各项资料。</view>
    </view>
    
    <wd-form 
      ref="formRefs" 
      :model="formData" 
      :errorType="errorType" 
      v-if="!idCardInfo.idCardNumber"
    >
      <wd-input 
        align-right 
        type="text" 
        label="真实姓名" 
        prop="name"
        v-model="formData.name" 
        placeholder="请输入真实姓名" 
        :rules="[{ required: true, message: '请输入真实姓名！' }]"
      />
      <view class="border-1px"></view>
      
      <wd-input 
        align-right 
        type="text" 
        label="身份证号" 
        prop="idCardNumber"
        v-model="formData.idCardNumber" 
        placeholder="请输入身份证号" 
        :rules="[{ required: true, message: '请输入身份证号！' }]"
      />
      <view class="border-1px"></view>
    </wd-form>

    <view class="mt-32rpx font-size-28rpx color-#666 text-center" v-else>
      <view>{{ desensitizeIdCard(idCardInfo.idCardNumber) }}</view>
      <view>{{ idCardInfo.name }}</view>
    </view>
    
    <!-- 认证按钮 -->
    <view class="btn-full w-center pt-40rpx" v-if="!user.userInfo.verificationFlag">
      <wd-button 
        class="btn-w-full btn-h-78"
        :loading="loading"
        :disabled="user.userInfo.verificationFlag"
        @click="submit"
      >{{ user.userInfo.verificationFlag ? '认证成功' : '实名认证' }}</wd-button>
    </view>
  </view>
</template>
  
<script lang="ts" setup>
import { IdentityVerification, QueryIdentityVerification } from "@/service/db_user";
import { useUserStore } from "@/store";
import { useToast } from "wot-design-uni";
import { User } from '@/service/types/user';

// 主题颜色
const user = useUserStore();
const toast = useToast();
const props = defineProps({
  isShowText: {
    type: Boolean,
    default: true
  }
})

const formRefs = ref();
const errorType = ref<"message" | "toast" | "none">('toast');
const formData = reactive({
  userId: user.userInfo.id,
  name: '',
  idCardNumber: '',
})
const submit = () => {
  formRefs.value
    .validate()
    .then(({ valid }) => {
      if (!valid) return;
      user.loginSubmit = true;
      identityVerification();
    })
    .catch((error) => {
      console.log(error, 'error')
    })
}

const loading = ref(false);
// 实名认证
const identityVerification = async () => {
  try {
    loading.value = true;
    const res = await IdentityVerification(formData);
    loading.value = false;
    if (res.code == 200) {
      toast.show('认证成功！');
      formData.name = '';
      formData.idCardNumber = '';
      user.getUserInfo();
      queryIdentityVerification();
      // setTimeout(() => { uni.navigateBack() }, 1000);
    }
  } catch (error) {
    console.log(error)
    loading.value = false;
  }
}

const idCardInfo = ref({} as User.QueryIdentityVerificationData);
// 获取身份认证详情
const queryIdentityVerification = async () => {
  const res = await QueryIdentityVerification({
    userId: user.userInfo.id
  })
  idCardInfo.value = res.data || {} as User.QueryIdentityVerificationData;
}

// 身份证号脱敏
const desensitizeIdCard = computed(() => {
  return (idCard) => {
    return idCard.replace(/^(.{4})(.*)(.{4})$/, '$1****************$3');
  }
})

onMounted(() => {
  user.userInfo.verificationFlag && queryIdentityVerification();
})
</script>

<style lang="scss" scoped>
</style>
      